<template>
  <view class="qiuqian-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="record-content">
      <tui-form ref="form">
        <tui-list-cell padding="0" :hover="false">
          <view class="tui-list-cell tui-list-cell-name">
            <view class="left-label">姓名</view>
            <view class="tui-content">
              <tui-input
                backgroundColor="none"
                color="#666"
                size="26rpx"
                padding="6rpx 0"
                :borderBottom="false"
                textRight
                v-model="baseFormData.name"
                placeholder="请输入姓名"
              ></tui-input>
            </view>
          </view>
        </tui-list-cell>
      </tui-form>

      <tui-form-button
        style="margin-top:20px;padding:0 10px"
        radius="50px"
        background="#c09351"
        @click="handerClick"
      >立即测算</tui-form-button>
    </view>

    <tui-picker
      :layer="layer"
      :show="showSelect"
      :pickerData="sexsList"
      @hide="handerOnClose"
      @change="handerConfirm"
    ></tui-picker>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  data() {
    return {
      currentFlag: null,
      baseFormData: {
        name: "",
        sex: 0
      },
      layer: 1,
      showSelect: false,
      selectFlag: null,
      selectList: [],
      sexsList: [
        {
          text: "男",
          value: 0
        },
        {
          text: "女",
          value: 1
        },
        {
          text: "不限",
          value: 2
        }
      ],
      sexData: ["男", "女", "不限"]
    };
  },
  onLoad(option) {
    this.currentFlag = option.flag;
  },
  onShow() {},
  methods: {
    handerSelect(list, flag) {
      this.selectList = JSON.parse(JSON.stringify(list));
      this.selectFlag = flag;
      if (flag == "fullLocation") {
        this.layer = 3;
      } else {
        this.layer = 1;
      }
      this.showSelect = true;
    },
    handerConfirm(e) {
      if (this.selectFlag == "fullLocation") {
        this.baseFormData.fullLocation = e.result;
        this.baseFormData.province = e.text[0];
        this.baseFormData.city = e.text[2];
        this.showSelect = false;
      } else {
        this.baseFormData[this.selectFlag] = e.value;
        this.showSelect = false;
      }
    },
    handerOnClose() {
      this.showSelect = false;
    },

    handerClickDate() {
      this.$refs.dateTime && this.$refs.dateTime.show();
    },

    async handerClick() {
      if (!this.baseFormData.name) {
        let params = {
          title: "姓名不能为空"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }

      uni.navigateTo({
        url: `/pqgeInfo/xingmingdafen/dafenInfo?name=${this.baseFormData.name}`
      });
    }
  }
};
</script>

<style lang="scss">
.qiuqian-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  background: #f6f6f6;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  .record-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    // background: #fff;
    // padding: 12px;
    position: relative;
    z-index: 1;
    .tui-list-cell {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 60rpx 24rpx 30rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      position: relative;
      background: none !important;
      &.tui-list-cell-name {
        padding: 17rpx 20rpx 17rpx 30rpx;
      }
      .left-label {
        font-size: 26rpx;
        color: #666;
      }
      .tui-cell__line {
        border-bottom: none !important;
      }
      .file_input {
        position: absolute;
        z-index: 1;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}
</style>